---
title: VuePress에서 마이그레이션
description: 기존 VuePress 프로젝트를 Astro로 마이그레이션하기 위한 팁
type: migration
stub: true
framework: VuePress
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[VuePress](https://vuePress.vuejs.org)는 Vue를 기반으로 구축된 오픈 소스 정적 사이트 생성기입니다.

## VuePress와 Astro의 주요 유사점

VuePress와 Astro는 프로젝트 마이그레이션에 도움이 되는 몇 가지 유사점을 공유합니다.

- VuePress와 Astro는 모두 비슷한 프로젝트 파일 구조를 가진 최신 Javascript 정적 사이트 생성기입니다. 둘 다 [파일 기반 라우팅을 위한 특수 `src/pages/` 폴더](/ko/basics/astro-pages/)를 사용합니다. 사이트의 페이지를 만들고 관리하는 것이 익숙하게 느껴질 것입니다.

- Astro와 VuePress는 모두 [콘텐츠 중심 웹사이트](/ko/concepts/why-astro/#콘텐츠-중심)용으로 설계되었으며 Markdown 파일에 대한 뛰어난 지원 기능이 내장되어 있습니다. Markdown으로 작성하는 것은 친숙하게 느껴지며 기존 콘텐츠를 유지할 수 있습니다.

- Astro는 [Vue 컴포넌트 사용을 위한 공식 통합](/ko/guides/integrations-guide/vue/) 기능을 갖추고 있으며 Vue용 여러 패키지를 포함하여 [NPM 패키지 설치](/ko/guides/imports/#npm-패키지)를 지원합니다. Vue UI 컴포넌트를 작성할 수 있으며 기존 Vue 컴포넌트 및 종속성의 일부 또는 전부를 유지할 수도 있습니다.

## VuePress와 Astro의 주요 차이점

Astro에서 VuePress 사이트를 다시 구축하면 몇 가지 중요한 차이점을 발견하게 될 것입니다.

- VuePress는 Vue 기반 단일 페이지 애플리케이션 (SPA)입니다. Astro 사이트는 [`.astro` 컴포넌트](/ko/basics/astro-components/)를 사용하여 구축된 다중 페이지 앱이지만 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/ko/guides/framework-components/) 및 원시 HTML 템플릿도 지원할 수 있습니다.

- [레이아웃 템플릿](/ko/basics/layouts/): VuePress 사이트는 페이지 콘텐츠용 Markdown (`.md`) 파일과 레이아웃용 HTML (`.html`) 템플릿을 사용하여 생성됩니다. Astro는 컴포넌트 기반이며 페이지, 레이아웃 및 개별 UI 요소에 대한 HTML 템플릿을 포함하는 Astro 컴포넌트를 사용합니다. Astro는 페이지 템플릿에 Markdown 콘텐츠를 래핑하기 위한 Astro 레이아웃 컴포넌트를 사용하여 [`.md` 및 `.mdx` 파일의 페이지](/ko/guides/markdown-content/)를 만들 수도 있습니다.

- VuePress는 콘텐츠가 많은 Markdown 중심 사이트를 구축하도록 설계되었으며 Astro에서 직접 구축해야 하는 문서 관련 웹 사이트 기능이 내장되어 있습니다. 대신 Astro는 [공식 문서 테마](https://starlight.astro.build)를 통해 일부 문서 관련 기능을 제공합니다. 이 웹사이트는 해당 템플릿에 대한 영감을 주었습니다! 테마 쇼케이스에서 기본 제공 기능이 포함된 더 많은 [커뮤니티 문서 테마](https://astro.build/themes?search=&categories%5B%5D=docs)를 찾아보실 수도 있습니다.

## VuePress에서 Astro로 전환

VuePress 문서 사이트를 Astro로 변환하려면 공식 [Starlight 문서 테마 시작 템플릿](https://starlight.astro.build)으로 시작하거나 [테마 쇼케이스](https://astro.build/themes?search=&categories%5B%5D=docs)에서 더 많은 커뮤니티 문서 테마를 탐색하세요.

공식 스타터 중 하나를 사용하여 새로운 Astro 프로젝트를 시작하려면 `--template` 인수를 `create astro` 명령에 전달할 수 있습니다. 또는 [GitHub의 기존 Astro 저장소에서 새 프로젝트를 시작](/ko/install/auto/#시작-템플릿)할 수 있습니다.

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template starlight
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template starlight
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template starlight
    ```
    </Fragment>
  </PackageManagerTabs>

[Markdown 페이지를 생성](/ko/guides/markdown-content/)하기 위해 기존 Markdown 콘텐츠 파일을 가져오세요. 이러한 문서를 VuePress의 `docs`에서 Astro의 `src/pages/`로 이동하여 [파일 기반 라우팅](/ko/guides/routing/)을 계속 활용할 수 있습니다. 기존 VuePress 프로젝트에 해당하는 이름으로 폴더를 생성하면 기존 URL을 유지할 수 있습니다.

VuePress 또는 설치한 테마는 아마도 사이트 레이아웃과 메타데이터의 대부분을 처리했을 것입니다. 페이지의 `<head>`를 포함하여 Astro에서 템플릿 작성을 직접 관리하는 방법을 알아보려면 [Astro 레이아웃을 Markdown 페이지 래퍼로 구축](/ko/basics/layouts/#markdownmdx-레이아웃)하는 방법을 읽어보세요.

Astro의 문서 스타터와 기타 템플릿은 [astro.new](https://astro.new)에서 찾을 수 있습니다. 각 프로젝트의 GitHub 저장소에 대한 링크는 물론 StackBlitz, CodeSandbox 및 Gitpod 온라인 개발 환경에서 작업 중인 프로젝트를 열 수 있는 원클릭 링크도 찾을 수 있습니다.

## 커뮤니티 자료

- 여러분의 자료를 추가하세요!